import React, { useState } from 'react';
import 'vditor/src/assets/scss/index.scss';
import 'braft-editor/dist/output.css';
import markd from '@/asserts/md/markdown.md';
import VditorPreview from '@/components/MarkdownPreview/VditorPreview';
import VditorEditor from '@/components/MarkdownEditor/VditorEditor';
// 引入EditorState
import BraftEditor from 'braft-editor';

export default () => {
  const [md, setMd] = useState(markd);

  // 将raw格式的数据转换成editorState
  // const rawString = `{"blocks":[{"key":"9hu83","text":"Hello World!","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":6,"length":5,"style":"BOLD"},{"offset":6,"length":5,"style":"COLOR-F32784"}],"entityRanges":[],"data":{}}],"entityMap":{}}`;
  const rawString = `{"blocks":[{"key":"bd3g6","text":"web扫码登录怎么实现，提供一下思路","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":18,"style":"COLOR-777777"},{"offset":0,"length":18,"style":"FONTSIZE-15"},{"offset":0,"length":18,"style":"BGCOLOR-FFFFFF"}],"entityRanges":[],"data":{"nodeAttributes":{}}}],"entityMap":{}}`;
  return (
    <div style={{ width: '1400px', margin: '0 auto' }}>
      <VditorEditor
        inputChange={(value) => {
          setMd(value);
        }}
      />
      {/* <VditorPreview markdown={htmlString} /> */}
      <div
        style={{ overflow: 'hidden', minHeight: 30, position: 'relative' }}
        dangerouslySetInnerHTML={{
          __html: BraftEditor.createEditorState(rawString).toHTML(),
        }}
      ></div>
    </div>
  );
};
